<template>
	<view class="">
		<u-navbar title="商品订单" placeholder>
			<view class="flex align-center" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
		</u-navbar>
		<view class="pl-20 pr-20 bg-white">
		 <u-tabs 
			:list="subsectionList" 
			:current="curNow" 
			keyName="label" 
			lineColor="#e54d42"
			:activeStyle="{color: '#e54d42'}"
			:scrollable="false"
			@click="sectionChange" 
		/>
		</view>
		<view class="my-list">
			<u-list :height="swiperHeight" @scrolltolower="scrolltolower" v-if="dataList.length > 0">
				<u-list-item v-for="(orderIm, orderIx) in dataList" :key="orderIx">
					<view class="item fsize-26" @click="$u.route('/pages/order/details/productDetails',{id:orderIm.orderId, index: orderIx})">
						<view class="flex justify-between pb-20 border-b fweigh-600 align-center">
							<view class="flex align-center">
								<image class="d-block width-40 height-40 border-radius-60 mr-10" src="../../../static/logo.png" />
								<text>{{orderIm.userNickName}}</text>
							</view>
							<view class="">{{
								orderIm.status===1 && orderIm.payStatus === 1?'待支付':
								orderIm.status===1 && orderIm.payStatus >= 2 && orderIm.shipStatus === 1?'待发货':
								orderIm.status===1 && orderIm.payStatus >= 2 && orderIm.shipStatus === 2?'部分发货':
								orderIm.status===1 && orderIm.payStatus >= 2 && orderIm.shipStatus >= 3 && orderIm.confirmStatus === 1 ?'已发货':
								orderIm.status===1 && orderIm.payStatus >= 2 && orderIm.shipStatus >= 3 && orderIm.confirmStatus >= 2 && orderIm.isComment === false?'待评价':
								orderIm.status===1 && orderIm.payStatus >= 2 && orderIm.shipStatus >= 3 && orderIm.confirmStatus >= 2 && orderIm.isComment === true?'已评价':
								orderIm.status ===2 ? '已完成':
								orderIm.status ===3 ? '已取消':''
							}}
							</view>
						</view>
						<view class="flex pt-20 pb-20" v-for="(proIm, proIx) in orderIm.items" :key="proIx">
							<image class="d-block width-90 height-90 border-radius-10" :src="proIm.imageUrl || '../../static/logo.png'" />
							<view class="ml-20 flex flex--row justify-between">
								<view class="">{{proIm.name}}</view>
								<view class="mt-10">
									<text class="line-red fsize-24">￥</text>
									<text class="line-red">{{proIm.price}}</text>
									<text class="line-gray fsize-24 ml-10">x{{proIm.nums}}</text>
								</view>
							</view>
						</view>
						<view class="flex justify-between align-end pb-20">
							<view class="fsize-24">
								<view>No: {{orderIm.orderId}}</view>
								<view class="line-gray">{{orderIm.createTime}}</view>
							</view>
							<!-- <text>{{orderIm.createTime}}</text> -->
							<view class="">
								<text class="fsize-24">实付:</text>
								<text class="fsize-24 line-red">￥</text>
								<text class="line-red">{{orderIm.orderAmount}}</text>
							</view>
						</view>
						<view class="flex justify-end pt-20 border-t" v-if="orderIm.status===1 && orderIm.payStatus === 1">
							<view class="obtn obtn-st1" @click.stop="operate(orderIm.orderId,'cancel')">取消订单</view>
							<view class="obtn obtn-st2" @click="$u.route('pages/payment/qrc', {id:orderIm.orderId, orderType: 1})">收款码</view>
							<view class="obtn obtn-st2" @click.stop="operate(orderIm.orderId, 'affirm')">确认收款</view>
						</view>
					</view>
				</u-list-item>
				<u-loadmore :status="loadmore.status" :icon-type="loadmore.iconType" :load-text="loadmore.loadText.loadText" margin-top="20"
					margin-bottom="20" class="coreshop-padding-top-10" />
			</u-list>
		</view>
		<!-- 无数据时默认显示 -->
		<view class="emptybox" v-if="dataList.length == 0">
			<u-empty icon-size="150" text="暂无数据" mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	import listHeightMixin from '@/common/computedAltitude.js'
	import { mapState } from 'vuex'
	export default {
		mixins:[listHeightMixin],
		data() {
			return {
				subsectionList: [
					// { label: '全部', value: 0 }, 
					// { label: '待支付', value: 1 },
					{ label: '待发货', value: 2 },
					{ label: '待收货', value: 3 },
					{ label: '待评价', value: 4 }
				],
				loadmore:{
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
					},
				},
				curNow: 0,
				dataList: [],
				searchData: {
					clientType: '',
					status:2,
					page: 1,
					limit: 10
				}
			}
		},
		onLoad() {
			if(this.userInfo.roleCategoryId===4){
				this.searchData.staffId = this.userInfo.userId
			}
			uni.$on('up-prodct', opt=>{
				this.dataList[opt.ix] = {...this.dataList[opt.ix], ...opt.details}
				this.$forceUpdate()
			})
			this.getPageList()
		},
		onUnload() {
			// 移除监听事
			uni.$off('up-prodct')
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			operate(rowid, ty){
				let that = this
				uni.showModal({
					title: '提示',
					content: ty==='affirm'?'确认该订单已收款?':'确认取消该订单?',
					success: function (res) {
						if (res.confirm) {
							if(ty === 'cancel'){
								that.$reqJsonPost('CoreCmsProductCancelOrder', { id: [rowid], orderType: 1 }).then(res=>{
									that.dataList = that.dataList.filter(item => item.orderId !== rowid)
								})
							}else if (ty === 'affirm'){
								that.$reqJsonPost('CoreCmsProjectOrderPay', {
									orderId: rowid,
									type: 1,
									orderType: 1,
									paymentCode: 'offline',
								}).then(res=>{
									const ix = that.dataList.findIndex(n=> n.orderId === rowid)
									console.log('nimad', ix)
									that.dataList[ix].payStatus = 2
									that.dataList[ix].globalStatusText = '待发货'
								})
							}
						}
					}
				})
			},
			sectionChange(e) {
				if (this.curNow === e.index) return
				this.curNow = e.index
				this.searchData = this.$options.data().searchData
				this.searchData.status = e.value
				this.dataList = []
				this.getPageList()
			},
			getPageList() {
				this.searchData.clientType = this.userInfo.roleCategoryId
				this.$reqJsonPost('CoreCmsOrderList', this.searchData).then(res => {
					this.dataList = [...this.dataList, ...res.data.list]
					if (res.count > this.dataList.length) {
						this.loadmore.status = 'loadmore'
						this.searchData.page++
					} else {
						// 数据已加载完毕
						this.loadmore.status = 'nomore'
					}
				})
			},
			scrolltolower() {
				if (this.loadmore.status === 'loadmore') {
					this.getPageList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('list.scss');
</style>
